/**
 * 用户头像菜单功能
 * 实现用户头像显示、下拉菜单和登录状态处理
 */

document.addEventListener('DOMContentLoaded', function() {
    // 模拟用户登录状态
    // 在实际应用中，这里应该从服务器或localStorage获取真实的用户登录状态
    const isLoggedIn = sessionStorage.getItem('userLoggedIn') === 'true';
    const userName = sessionStorage.getItem('userName') || '游客';
    const userAvatar = sessionStorage.getItem('userAvatar') || '';
    
    // 根据时间获取问候语
    function getTimeGreeting() {
        const hour = new Date().getHours();
        if (hour < 6) return '夜深了，还在探索非遗文化吗？ ';
        if (hour < 12) return '早上好！开启今天的非遗之旅吧！ ';
        if (hour < 14) return '中午好！休息一下，欣赏非遗之美。 ';
        if (hour < 18) return '下午好！继续探索精彩的非遗世界。 ';
        if (hour < 22) return '晚上好！非遗文化伴您度过美好时光。 ';
        return '夜已深，非遗文化的魅力让您流连忘返？ ';
    }
    
    // 获取问候语
    const timeGreeting = getTimeGreeting();

    // 在所有页面的nav-right区域添加头像功能
    const navRightElements = document.querySelectorAll('.nav-right');
    
    navRightElements.forEach(navRight => {
        // 移除"用户头像功能已移除"的注释
        const commentNodes = Array.from(navRight.childNodes).filter(node => 
            node.nodeType === 8 && node.textContent.includes('用户头像功能已移除')
        );
        
        commentNodes.forEach(node => node.remove());

        // 检查是否已有头像
        if (navRight.querySelector('.avatar-container')) return;

        // 创建头像容器
        const avatarContainer = document.createElement('div');
        avatarContainer.className = 'avatar-container';

        // 创建头像按钮
        const userAvatarElement = document.createElement('button');
        userAvatarElement.className = 'user-avatar';
        
        // 添加趣味性动画类
        userAvatarElement.classList.add('fun-avatar');
        
        // 如果用户已登录，显示用户头像，否则显示默认头像
        if (isLoggedIn && userAvatar) {
            // 如果有用户头像URL，使用img标签
            const avatarImg = document.createElement('img');
            avatarImg.src = userAvatar;
            avatarImg.alt = userName;
            avatarImg.className = 'avatar-img';
            userAvatarElement.appendChild(avatarImg);
        } else {
            // 显示默认头像SVG
            const defaultAvatar = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            defaultAvatar.setAttribute('width', '24');
            defaultAvatar.setAttribute('height', '24');
            defaultAvatar.setAttribute('viewBox', '0 0 24 24');
            defaultAvatar.setAttribute('fill', 'none');
            defaultAvatar.setAttribute('stroke', document.body.classList.contains('dark-mode') ? '#e0e0e0' : '#666');
            defaultAvatar.setAttribute('stroke-width', '2');
            defaultAvatar.setAttribute('stroke-linecap', 'round');
            defaultAvatar.setAttribute('stroke-linejoin', 'round');
            
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', '12');
            circle.setAttribute('cy', '12');
            circle.setAttribute('r', '10');
            
            const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path1.setAttribute('d', 'M12 16v-4');
            
            const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path2.setAttribute('d', 'M12 8h.01');
            
            defaultAvatar.appendChild(circle);
            defaultAvatar.appendChild(path1);
            defaultAvatar.appendChild(path2);
            userAvatarElement.appendChild(defaultAvatar);
            
            // 如果未登录，添加visitor类
            if (!isLoggedIn) {
                userAvatarElement.classList.add('visitor');
            }
        }

        // 创建下拉菜单
        const avatarMenu = document.createElement('div');
        avatarMenu.className = 'avatar-menu';

        // 创建分隔线和问候语元素
        function createDivider() {
            const divider = document.createElement('div');
            divider.style.height = '1px';
            divider.style.backgroundColor = document.body.classList.contains('dark-mode') ? '#4a4a4a' : '#e0e0e0';
            divider.style.margin = '5px 0';
            return divider;
        }
        
        function createGreetingItem() {
            const greetingItem = document.createElement('div');
            greetingItem.className = 'avatar-menu-item';
            greetingItem.style.padding = '12px 15px';
            greetingItem.style.color = document.body.classList.contains('dark-mode') ? '#e0e0e0' : '#333';
            greetingItem.style.fontSize = '12px';
            greetingItem.style.fontStyle = 'italic';
            greetingItem.style.pointerEvents = 'none';
            greetingItem.textContent = timeGreeting;
            return greetingItem;
        }
        
        // 根据登录状态添加不同的菜单项
        if (isLoggedIn) {
            // 用户已登录，显示问候语、个人资料、设置和退出登录
            avatarMenu.appendChild(createGreetingItem());
            avatarMenu.appendChild(createDivider());
            avatarMenu.appendChild(createMenuItem('profile.html', '👤', '个人资料'));
            avatarMenu.appendChild(createMenuItem('settings.html', '⚙️', '设置'));
            
            // 添加一些有趣的菜单项
            const funItems = [
                { icon: '🎁', text: '每日推荐' },
                { icon: '🏆', text: '我的成就' }
            ];
            
            avatarMenu.appendChild(createDivider());
            funItems.forEach(item => {
                avatarMenu.appendChild(createMenuItem('#', item.icon, item.text, function() {
                    showFunMessage(`✨ ${item.text}功能即将上线，敬请期待！`, 'info');
                }));
            });
            
            avatarMenu.appendChild(createDivider());
            avatarMenu.appendChild(createMenuItem('#', '🚪', '退出登录', handleLogout));
        } else {
            // 用户未登录，显示登录和注册选项
            avatarMenu.appendChild(createGreetingItem());
            avatarMenu.appendChild(createDivider());
            avatarMenu.appendChild(createMenuItem('#', '🔑', '登录', handleLoginClick));
            avatarMenu.appendChild(createMenuItem('#', '📝', '注册', handleRegisterClick));
        }

        // 将头像按钮和下拉菜单添加到容器中
        avatarContainer.appendChild(userAvatarElement);
        avatarContainer.appendChild(avatarMenu);

        // 将头像容器添加到nav-right中
        if (navRight.firstChild) {
            navRight.insertBefore(avatarContainer, navRight.firstChild);
        } else {
            navRight.appendChild(avatarContainer);
        }

        // 处理鼠标事件
        handleAvatarEvents(userAvatarElement, avatarMenu);
    });

    // 主题切换时更新头像样式
    const themeToggle = document.querySelector('.theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', function() {
            // 等待主题切换完成后更新样式
            setTimeout(() => {
                updateAvatarStyles();
            }, 10);
        });
    }

    // 检查当前主题并更新头像样式
    updateAvatarStyles();

    // 辅助函数：创建菜单项
    function createMenuItem(href, icon, text, onClick) {
        const item = document.createElement('a');
        item.href = href;
        item.className = 'avatar-menu-item';
        
        if (onClick) {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                onClick();
            });
        }

        const iconSpan = document.createElement('span');
        iconSpan.className = 'menu-icon';
        iconSpan.textContent = icon;
        
        const textSpan = document.createElement('span');
        textSpan.className = 'menu-text';
        textSpan.textContent = text;
        
        item.appendChild(iconSpan);
        item.appendChild(textSpan);
        
        return item;
    }

    // 辅助函数：处理退出登录
    function handleLogout() {
        if (confirm('确定要退出登录吗？')) {
            // 清除登录状态
            sessionStorage.removeItem('userLoggedIn');
            sessionStorage.removeItem('userName');
            sessionStorage.removeItem('userAvatar');
            
            // 刷新页面
            location.reload();
        }
    }

    // 辅助函数：处理登录点击
    function handleLoginClick() {
        // 创建有趣的登录提示
        const loginMessages = [
            '欢迎回来！正在为您开启非遗探索之旅... 🌟',
            '登录成功！准备好发现更多精彩的非遗文化了吗？ 🎉',
            '嗨！很高兴再次见到您。今天想探索什么非遗项目？ 👋',
            '登录成功！您的非遗收藏正在等着您呢。 📚'
        ];
        const randomLoginMsg = loginMessages[Math.floor(Math.random() * loginMessages.length)];
        
        // 显示有趣的登录成功提示
        showFunMessage(randomLoginMsg, 'success');
        
        // 模拟登录成功
        sessionStorage.setItem('userLoggedIn', 'true');
        sessionStorage.setItem('userName', '张三');
        sessionStorage.setItem('userAvatar', '');
        
        // 延迟后刷新页面，让用户看到提示
        setTimeout(() => {
            location.reload();
        }, 1500);
    }

    // 辅助函数：处理注册点击
    function handleRegisterClick() {
        // 创建有趣的注册提示
        const registerMessages = [
            '即将开启您的非遗探索之旅！请稍候... 🚀',
            '注册功能即将上线，敬请期待！✨',
            '成为非遗探索家的第一步！我们正在准备中... 🎨',
            '想要加入我们的非遗社区吗？很快就能实现了！ 👪'
        ];
        const randomRegisterMsg = registerMessages[Math.floor(Math.random() * registerMessages.length)];
        
        // 显示有趣的注册提示
        showFunMessage(randomRegisterMsg, 'info');
    }
    
    // 辅助函数：显示有趣的消息提示
    function showFunMessage(message, type = 'default') {
        // 创建消息元素
        const messageElement = document.createElement('div');
        messageElement.className = 'fun-message';
        
        // 根据类型设置不同的样式
        let bgColor, textColor, icon;
        
        switch(type) {
            case 'success':
                bgColor = '#4caf50';
                textColor = '#fff';
                icon = '✅ ';
                break;
            case 'error':
                bgColor = '#f44336';
                textColor = '#fff';
                icon = '❌ ';
                break;
            case 'warning':
                bgColor = '#ff9800';
                textColor = '#fff';
                icon = '⚠️ ';
                break;
            case 'info':
                bgColor = '#2196f3';
                textColor = '#fff';
                icon = 'ℹ️ ';
                break;
            default:
                bgColor = document.body.classList.contains('dark-mode') ? '#333' : '#fff';
                textColor = document.body.classList.contains('dark-mode') ? '#fff' : '#333';
                icon = '✨ ';
        }
        
        messageElement.textContent = icon + message;
        
        // 设置样式
        messageElement.style.position = 'fixed';
        messageElement.style.top = '20%';
        messageElement.style.left = '50%';
        messageElement.style.transform = 'translate(-50%, -50%)';
        messageElement.style.backgroundColor = bgColor;
        messageElement.style.color = textColor;
        messageElement.style.padding = '15px 20px';
        messageElement.style.borderRadius = '10px';
        messageElement.style.boxShadow = '0 4px 20px rgba(0,0,0,0.2)';
        messageElement.style.zIndex = '10000';
        messageElement.style.opacity = '0';
        messageElement.style.transition = 'all 0.5s ease';
        messageElement.style.fontSize = '14px';
        messageElement.style.textAlign = 'center';
        messageElement.style.fontWeight = '500';
        
        // 添加到body
        document.body.appendChild(messageElement);
        
        // 触发动画
        setTimeout(() => {
            messageElement.style.opacity = '1';
            messageElement.style.transform = 'translate(-50%, -50%) scale(1.1)';
        }, 10);
        
        // 3秒后淡出
        setTimeout(() => {
            messageElement.style.opacity = '0';
            messageElement.style.transform = 'translate(-50%, -50%) scale(0.9)';
            setTimeout(() => messageElement.remove(), 500);
        }, 3000);
    }

    // 辅助函数：更新头像样式以适配当前主题
    function updateAvatarStyles() {
        const isDarkMode = document.body.classList.contains('dark-mode');
        const userAvatars = document.querySelectorAll('.user-avatar');
        
        userAvatars.forEach(avatar => {
            // 确保SVG图标颜色与当前主题匹配
            const svgs = avatar.querySelectorAll('svg');
            svgs.forEach(svg => {
                svg.setAttribute('stroke', isDarkMode ? '#e0e0e0' : '#666');
            });
        });
    }
    
    // 添加趣味性CSS样式
    function addFunStyles() {
        // 创建style元素
        const styleElement = document.createElement('style');
        
        // 添加CSS样式
        styleElement.textContent = `
            /* 趣味头像动画 */
            .fun-avatar {
                transition: all 0.3s ease;
            }
            
            .fun-avatar:hover {
                transform: scale(1.1) rotate(5deg);
                animation: bounce 0.5s ease;
            }
            
            @keyframes bounce {
                0%, 100% { transform: translateY(0) scale(1.1) rotate(5deg); }
                50% { transform: translateY(-5px) scale(1.15) rotate(-5deg); }
            }
            
            /* 菜单淡入淡出动画 */
            .avatar-menu {
                opacity: 0;
                transform: translateY(10px);
                transition: opacity 0.3s ease, transform 0.3s ease, display 0s linear 0.3s;
            }
            
            .avatar-container:hover .avatar-menu,
            .avatar-menu.show {
                opacity: 1;
                transform: translateY(0);
                display: block;
                transition: opacity 0.3s ease, transform 0.3s ease, display 0s linear 0s;
            }
            
            /* 菜单项悬停效果 */
            .avatar-menu-item {
                position: relative;
                overflow: hidden;
                transition: all 0.3s ease;
            }
            
            .avatar-menu-item::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background: linear-gradient(90deg, #4CAF50, #8BC34A);
                transition: width 0.3s ease;
            }
            
            .avatar-menu-item:hover::after {
                width: 100%;
            }
            
            /* 登录成功动画 */
            @keyframes loginSuccess {
                0% { transform: scale(0.8); opacity: 0; }
                50% { transform: scale(1.2); }
                100% { transform: scale(1); opacity: 1; }
            }
            
            .login-success {
                animation: loginSuccess 0.6s ease;
            }
        `;
        
        // 将style元素添加到head
        document.head.appendChild(styleElement);
    }
    
    // 调用添加趣味样式函数
    addFunStyles();

    // 辅助函数：处理头像事件
    function handleAvatarEvents(avatarButton, avatarMenu) {
        // 点击计数，用于连续点击彩蛋
        let clickCount = 0;
        let clickTimer = null;
        
        // 点击头像切换菜单显示状态
        avatarButton.addEventListener('click', function(event) {
            // 处理连续点击计数
            clickCount++;
            
            // 重置计时器
            if (clickTimer) {
                clearTimeout(clickTimer);
            }
            
            // 2秒内没有新点击则重置计数
            clickTimer = setTimeout(() => {
                clickCount = 0;
            }, 2000);
            
            // 连续点击5次触发彩蛋
            if (clickCount === 5) {
                const easterEggMessages = [
                    ' 哇！你发现了隐藏彩蛋！',
                    ' 你对非遗文化真是充满好奇！',
                    ' 连续点击的你太棒了！',
                    ' 感谢你对传统文化的喜爱！'
                ];
                const randomMessage = easterEggMessages[Math.floor(Math.random() * easterEggMessages.length)];
                showFunMessage(randomMessage, 'success');
                
                // 给头像添加弹跳动画
                avatarButton.style.transition = 'transform 0.5s ease';
                let pos = 0;
                const bounceInterval = setInterval(() => {
                    pos++;
                    if (pos <= 10) {
                        avatarButton.style.transform = `translateY(-${pos}px)`;
                    } else if (pos <= 20) {
                        avatarButton.style.transform = `translateY(-${20-pos}px)`;
                    } else {
                        clearInterval(bounceInterval);
                        avatarButton.style.transform = 'translateY(0)';
                        setTimeout(() => {
                            avatarButton.style.transition = '';
                        }, 500);
                    }
                }, 20);
                
                clickCount = 0; // 重置计数
            }
            
            // 切换菜单的show类来触发淡入淡出动画
            avatarMenu.classList.toggle('show');
        });
        
        // 点击页面其他地方关闭菜单
        document.addEventListener('click', function(event) {
            if (!avatarButton.contains(event.target) && !avatarMenu.contains(event.target)) {
                avatarMenu.classList.remove('show');
            }
        });
        
        // 添加随机小惊喜 - 5%概率出现有趣的提示
        avatarButton.addEventListener('mouseenter', function() {
            if (Math.random() < 0.05) {
                const tips = [
                    ' 嘿，我在这里！',
                    ' 点击我看看吧！',
                    ' 有什么可以帮你的？',
                    ' 想换个造型吗？',
                    ' 感受匠人精神',
                    ' 领略传统艺术魅力',
                    ' 品味中华文化韵味',
                    ' 发现非遗的无限可能'
                ];
                const randomTip = tips[Math.floor(Math.random() * tips.length)];
                
                // 创建提示元素
                const tipElement = document.createElement('div');
                tipElement.textContent = randomTip;
                tipElement.style.position = 'absolute';
                tipElement.style.bottom = '100%';
                tipElement.style.right = '0';
                tipElement.style.marginBottom = '10px';
                tipElement.style.padding = '8px 12px';
                tipElement.style.backgroundColor = '#4CAF50';
                tipElement.style.color = 'white';
                tipElement.style.borderRadius = '8px';
                tipElement.style.fontSize = '12px';
                tipElement.style.zIndex = '1003';
                tipElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
                
                // 添加到容器
                const avatarContainer = avatarButton.parentElement;
                avatarContainer.appendChild(tipElement);
                
                // 3秒后移除提示
                setTimeout(() => {
                    tipElement.style.opacity = '0';
                    tipElement.style.transition = 'opacity 0.3s ease';
                    setTimeout(() => tipElement.remove(), 300);
                }, 3000);
            }
        });
    }
});